import React, { useEffect, useState } from 'react'
import { Descriptions, Card, Button, Space } from 'antd'
import { useParams, useNavigate } from 'react-router-dom'
import { reqGetHospitalShow } from '@api/hospital/hospitalList'
import { IhospitalShow } from '@api/hospital/hospitalList/model/hospitalListTypes'

export default function HospitalShow() {
  const navigate = useNavigate()
  // 获取通过路由参数传递过来的医院id
  const { id } = useParams()

  // 定义存储当前医院详情数据的状态
  const [hospitalShow, setHospitalShow] = useState<IhospitalShow>({})

  useEffect(() => {
    async function fetch() {
      const result = await reqGetHospitalShow(id as string)
      //   console.log(result)
      setHospitalShow(result)
    }
    fetch()
  }, [])
  return (
    <Card>
      {/*direction 控制Space里面的子组件是纵向排列还是水平排列. 
      size 控制间隔的大小  */}
      {/* <Space direction="vertical" size="large"> */}
      {/* column: 控制一行有多少个Descriptions.Item */}
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {hospitalShow.hospital?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          <img
            width={80}
            src={`data:image/png;base64,` + hospitalShow.hospital?.logoData}
            alt=""
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编号">
          {hospitalShow.hospital?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {hospitalShow.hospital?.param.fullAddress}
        </Descriptions.Item>
        {/* span: 是控制当前Descriptions.Item在一行里占几份 */}
        <Descriptions.Item label="坐车路线" span={2}>
          {hospitalShow.hospital?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {hospitalShow.hospital?.intro}
        </Descriptions.Item>
      </Descriptions>

      <Descriptions
        title="预约规则信息"
        bordered
        column={2}
        style={{ marginTop: 20, marginBottom: 20 }}
      >
        <Descriptions.Item label="预约周期">
          {hospitalShow.bookingRule?.cycle + '天'}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {hospitalShow.bookingRule?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {hospitalShow.bookingRule?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {hospitalShow.bookingRule?.quitTime}
        </Descriptions.Item>
        {/* span: 是控制当前Descriptions.Item在一行里占几份 */}
        <Descriptions.Item label="预约规则" span={2}>
          {hospitalShow.bookingRule?.rule.map((item, index) => {
            return (
              <div>
                {index + 1}.{item}
              </div>
            )
          })}
        </Descriptions.Item>
      </Descriptions>

      <Button
        onClick={() => {
          navigate(-1)
        }}
      >
        返回
      </Button>
      {/* </Space> */}
    </Card>
  )
}
